<template>
  <div>
    <top/>
    <div id="navi">
      <div class="description">
        <div style="font-weight: bolder;height:30px;font-size:24px;">{{ projectName }}</div>
        <div
          style="text-align: justify;height:70px;line-height:23px;text-indent: 2em;
          overflow: hidden; text-overflow: ellipsis; font-size:16px;">
          {{ description }}
        </div>

      </div>
      <div class="options">
        <div @mousedown="switchComponent('ProjectDetailSummary')" @mouseup="recover" class="summary">项目概况</div>
        <div @mousedown="switchComponent('BugCreate')" @mouseup="recover" class="create">新建Bug</div>
        <div @mousedown="switchComponent('ProjectDetailMine')" @mouseup="recover" class="mine">我创建的Bug</div>
        <div @mousedown="switchComponent('ProjectDetailAll')" @mouseup="recover" class="all">所有Bug</div>
        <div @mousedown="switchComponent('ProjectDetailStat')" @mouseup="recover" class="stat">Bug统计</div>
      </div>
    </div>
    <div id="content">
      <component :is="option" :id="projectId"></component>
    </div>
    <bottom v-if="refresh"></bottom>
  </div>
</template>

<script>
import top from "../base/top";
import bottom from "../base/bottom";
import ProjectDetailStat from "./ProjectDetailStat";
import ProjectDetailSummary from "./ProjectDetailSummary";
import ProjectDetailMine from "./ProjectDetailMine";
import ProjectDetailAll from "./ProjectDetailAll";
import BugCreate from "./BugCreate";
import {projectInfo} from "./data/global";

export default {
  name: "ProjectDetail",
  components:{top,bottom,BugCreate,ProjectDetailStat,ProjectDetailSummary,
    ProjectDetailAll,ProjectDetailMine},
  data(){
    return {
      option:ProjectDetailSummary,
      refresh: true,
      projectId:"",
      projectName:"",
      description:""
    }
  },
  mounted(){
    // 获取项目信息
    this.projectId = this.$route.query.projectId
    this.getProjectDescription()
  },
  methods:{
    switchComponent(name){
      this.option = name
      this.refresh = false
    },
    recover(){
      this.refresh = true
    },
    getProjectDescription(){
      let config = {
        url:"/cbug/project/info",
        method:"post",
        params:{
          projectId:this.projectId
        }
      }

      // 记得修改下面的语句
      this.projectId = projectInfo.projectId
      this.projectName = projectInfo.projectName
      this.description = projectInfo.projectDescription
    }
  }
}
</script>

<style scoped>
*{
  color:white;
}
#navi{
  position: relative;
  height:120px;
  padding-bottom: 20px;
  background-color: rgb(102, 177, 255);
  padding-right:50px;
  padding-left:50px;
}
#navi .description{
  float:left;
  height:100px;
  width:400px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 五个按钮的布局 */
#navi .options div{
  width:128px;
  height:78px;
  text-align: center;
  padding-top:50px;
  cursor: pointer;
}

#navi .options div:hover{
  background-color:rgba(255,255,255,0.5);
}

#navi .options{
  float:right;
  height:100px;
  width:60%;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* the background images of five navigation buttons */
#navi .options .summary {
  background: url("/static/lys/image/menu1.png") center top no-repeat;
}
#navi .options .summary:hover{
  background: url("/static/lys/image/menu1.png") center bottom no-repeat;
  color:#409eff;
}

#navi .options .create{
  background: url("/static/lys/image/menu3.png") center top no-repeat;
}
#navi .options .create:hover{
  background: url("/static/lys/image/menu3.png") center bottom no-repeat;
  color:#409eff;
}

#navi .options .mine{
  background: url("/static/lys/image/menu2.png") center top no-repeat;
}
#navi .options .mine:hover{
  background: url("/static/lys/image/menu2.png") center bottom no-repeat;
  color:#409eff;
}
#navi .options .all{
  background: url("/static/lys/image/menu4.png") center top no-repeat;
}
#navi .options .all:hover{
  background: url("/static/lys/image/menu4.png") center bottom no-repeat;
  color:#409eff;
}
#navi .options .stat{
  background: url("/static/lys/image/menu5.png") center top no-repeat;
}
#navi .options .stat:hover{
  background: url("/static/lys/image/menu5.png") center bottom no-repeat;
  color:#409eff;
}

#content{
  clear:both;
  position: relative;
  margin-left:5%;
  top:-20px;
  width: 90%;
  padding:20px;

  background-color:white;
  box-shadow: 1px 1px 3px 3px rgba(0,0,0,0.3);
}

</style>
